﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2>轮播图页面2</h2>

<div class="layui-carousel" id="ID-carousel-demo-image">
    <div carousel-item id="lunbotu">
        @* <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div> *@
    </div>
</div>

<script>
    $(function () {
        ShowLunbotu();
        Lunbotu();
    });

    function Lunbotu() {
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
        });
    }

    function ShowLunbotu() { 
        $.ajax({
            url: 'https://localhost:7061/api/Product/GetProductPages?index=1&size=6',
            type:'get',
            async:false,
            success: function (res) { 
                var tr = '';
                $(res.data).each(function (i,obj) {
                    tr += `<div><img src="${obj.imgUrl}"></div>`;
                });
                $("#lunbotu").html(tr);
            }
        });
    }
</script>